<!DOCTYPE html>
<html>
  <head>
    <style>
      #ground {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 80px;
        background: green;
      }
      #player {
        position: fixed;
        bottom: 80px;
        left: 20px;
        width: 20px;
        height: 90px;
        background: grey;
      }
      @-moz-keyframes bgchange {
        from {
          background: green;
        }

        to {
          background: black;
        }
      }
      @-webkit-keyframes bgchange {
        from {
          background: green;
        }

        to {
          background: black;
        }
      }
    </style>
  </head>

  <body>
    <div id="player"></div>
    <div id="ground"></div>
    <script src="../move.js"></script>
    <script>
      var ground = move('#ground').animate('bgchange', {
        duration: '4s',
        'iteration-count': 'infinite'
      }).end();

      addEventListener('keydown', function(e){
        var player = move('#player')
          .duration(300)
          .ease('out');

        switch (e.keyCode) {
          // up
          case 38:
            player
              .add('bottom', 100)
              .duration(200)
              .then()
                .sub('bottom', 100)
                .pop()
              .end();
            break;
          // left
          case 37:
            player.sub('left', 100).end();
            break;
          // right
          case 39:
            player.add('left', 100).end();
            break;
        }
      }, false);
    </script>
  </body>
</html>
